const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")
const TerserWebpackPlugin = require("terser-webpack-plugin")

module.exports = {
  mode:'none',
  entry:{
    index:'./src/index/index.js',
    demo:'./src/demo/demo.js'
  },
  output:{
    // filename:'[name]-[hash].bundle.js'//整个项目级别的。一旦一个项目当中有任何一个地方发生改变，打包过程中的hash值都会发生变化
    // filename:'[name]-[chunkhash].bundle.js'//在打包过程当中，只要是同一路的打包 chunkhash都是相同的 
    filename:'[name]-[contenthash:8].bundle.js'//根据输出文件的内容输出的hash值有不同的文件就有不同的hash值 contenthash是解决缓存最好的方式，因为精确定位到文件级别的hash，只有文件发生变化才有可能更新掉这个文件名
  },
  optimization:{
    minimizer:[ //在生产环境下起作用
      new TerserWebpackPlugin(),//压缩js文件
      new OptimizeCssAssetsWebpackPlugin() //压缩css文件
    ],
    splitChunks:{
      chunks:"all"
    }
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:[
          MiniCssExtractPlugin.loader,//可以将css代码从打包结果提取出来的插件通过link标签的时候注入(适合体积较大的css文件大于150KB)
          // 'style-loader',//将样式通过style标签注入
          'css-loader'
        ]
      }
    ]
  },
  plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title:"demo Page",
      template:"./src/demo/demo.html",
      filename:'demo.html',
      chunks:['demo']
    }),
    new HtmlWebpackPlugin({
      title:"index Page",
      template:"./src/index/index.html",
      filename:'index.html',
      chunks:['index']
    }),
    new MiniCssExtractPlugin({
      // filename:'[name]-[hash].bundle.css',
      // filename:'[name]-[chunkhash].bundle.css'
      filename:'[name]-[contenthash:8].bundle.css'
    }),
  ]
}